<template>
  <div>
    <!-- 
      v-model 是一个语法糖
      作用：=> 将data中的数据和表单元素做一个双向绑定
      原理：针对不同的表单元素（或者说表单元素type的不同属性值），vue底层会让
        v-model实现不同的属性绑定和事件监听 

      1. type="text"

      1.1 :value + @input 
        <input type="text" v-model="msg">等价于
        <input type="text" :value="msg" @input="handleInput">

      1.2 :value + @change   ==> v-model.lazy 相当于是触发回车或者失去焦点的时候触发 => @change
        <input type="text" v-model.lazy="msg">等价于
        <input type="text" :value="msg" @change="handleInput">


      2. type="checkbox"   ==> :checked + @change 

        <input type="checkbox" v-model="flag">等价于
        <input type="checkbox" :checked="flag" @change="handleInput">
     -->

     <h3>:value 和 @input 组合</h3>
     <!-- <input type="text" v-model="msg"> -->
     <!-- 1. 数据变化 页面更新 单独的 :value ==> 已经实现-->
     <br>
     <!-- <input type="text" :value="msg2"> -->
     <!-- 2. 页面变化，数据更新 ==> 页面变化，指的是我们的dom元素的内容变化了，去更新data中的数据 -->
     <br>
     <!-- <input type="text" :value="msg2" @input="handleInput"> -->

     <!-- msg2可以使用， e找不到-->
     <!-- 模板中使用事件对象 如果监听的是dom元素事件 $event => 事件对象  -->
     <!-- <input type="text" :value="msg2" @input="msg2 = $event.target.value"> -->

     <h3>:value 和  @change 组合</h3>
     <input type="text" v-model.lazy="msg">
     <input type="text" :value="desc" @change="desc = $event.target.value">

     <h3>:checked 和  @change 组合</h3>
     <input type="checkbox" v-model="flag">
     <!-- change事件： 失去焦点，或者回车的时候触发 -->
     <input type="checkbox" :checked="flag" @change="flag = $event.target.checked">
  </div>
</template>

<script>
export default {
    data(){
      return {
        msg:'hello world',
        msg2:'666',
        desc:'描述信息',
        flag:true
      }
    },
    methods:{
      handleInput(e){
        // 想获取input这个元素
        console.log(e.target.value)
        this.msg2 = e.target.value
      },
    }
}
</script>

<style>

</style>